<template>
    <confirmDialog v-if="isShowDialog" ref="TrafficTipsRef" @confirm="hideDialog" :showCancel="false">
        <span>{{ tips }}</span>
    </confirmDialog>
</template>

<script>
import useDataLimit from '@/hooks/useDataLimit';
import { LOCAL_KEY } from '@/constant/dict';

export default {
    name: 'TrafficTips',

    mixins: [useDataLimit],

    data() {
        return {
            tips: this.$t('monthlyUsage.trafficTips'),
            isShow: false
        };
    },

    methods: {
        hideDialog() {
            // 关闭弹窗
            this.$refs.TrafficTipsRef.hide();

            // 记录已经点击过确认按钮，清除记录的方法在登录方法中
            localStorage.setItem(LOCAL_KEY.IS_TRAFFIC_LIMIT, 1);
        }
    },

    mounted() {
        // 开始轮询
        this.pollingFetchDataLimit();
    },

    computed: {
        // 是否具有流量限制功能
        isShowDialog() {
            return this.isDataLimit;
        }
    },

    watch: {
        isReachedLimit: {
            handler(nval) {
                // 如果超出流量限制
                if (nval) {
                    // 如果目前还没有弹窗
                    if (!this.isShow) {
                        // 如果本地没有点击过确认弹窗的记录
                        if (!localStorage.getItem(LOCAL_KEY.IS_TRAFFIC_LIMIT)) {
                            // 记录目前已经弹过窗了，避免重复打开弹窗
                            this.isShow = true;

                            // 打开弹窗
                            this.$refs.TrafficTipsRef.show();
                        }
                    }
                }
            }
        }
    }
};
</script>

<style lang="less" scoped></style>
